import React, { useEffect, useState } from 'react';
import { Graph, Shape, Node } from '@antv/x6';
import { Button } from 'antd';
export default function index() {
  const [graph, setGraph] = useState<Graph | null>(null);
  const [show, setShow] = useState<Boolean>(false);

  useEffect(() => {
    markgraph();
  }, []);

  //生成画布
  const markgraph = () => {
    if (show) {
      console.log('未生成画布，无需重复创建');
      return;
    }
    //创建画布
    const graph = new Graph({
      container: document.getElementById('container') as HTMLElement,
      height: 600,
      background: {
        color: '#fffbe6', // 设置画布背景颜色
      },
      grid: {
        size: 10, // 网格大小 10px
        visible: true, // 渲染网格背景
      },
      panning: {
        enabled: true,
        modifiers: 'shift', //按住shift键并点击鼠标才能触发画布拖拽
      },
      //点击或者套索框选节点
      selecting: {
        enabled: true,
        rubberband: true, // 启用框选
      },
    });
    setGraph(graph);
    setShow(true);
  };
  //画布：toJSON
  const test08 = () => {
    console.log((graph as Graph).toJSON());
  };
  const addGraph = () => {
    const rect1 = new Shape.Rect({
      id: 'node1',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'rect',
      zIndex: 2,
      attrs: {
        body: {
          stroke: '#000',
          fill: '#fff',
        },
        label: {
          text: 'text1',
          fill: '#333',
        },
      },
    });
    const rect2 = new Shape.Rect({
      id: 'node2',
      x: 40,
      y: 150,
      width: 100,
      height: 40,
      label: 'rect',
      zIndex: 2,
      attrs: {
        body: {
          stroke: '#000',
          fill: '#fff',
        },
        label: {
          text: 'text2',
          fill: '#333',
        },
      },
    });

    // const circle = new Shape.Circle({
    //   id: 'node2',
    //   x: 280,
    //   y: 200,
    //   width: 60,
    //   height: 60,
    //   label: 'circle',
    //   zIndex: 2,
    // });

    const edge1 = new Shape.Edge({
      id: 'edge1',
      source: 'node1',
      target: 'node2',
      zIndex: 1,
    });
    const rect3 = new Shape.Rect({
      id: 'node3',
      x: 40,
      y: 260,
      width: 100,
      height: 40,
      label: 'rect',
      zIndex: 2,
      attrs: {
        body: {
          stroke: '#000',
          fill: '#fff',
        },
        label: {
          text: 'text3',
          fill: '#333',
        },
      },
    });
    const edge2 = new Shape.Edge({
      id: 'edge2',
      source: 'node2',
      target: 'node3',
      zIndex: 1,
    });

    const rect4 = new Shape.Rect({
      id: 'node4',
      x: 360,
      y: 460,
      width: 100,
      height: 40,
      label: 'rect',
      zIndex: 2,
      attrs: {
        body: {
          stroke: '#000',
          fill: '#fff',
        },
        label: {
          text: 'text4',
          fill: '#333',
        },
      },
    });
    const edge3 = new Shape.Edge({
      id: 'edge3',
      source: 'node3',
      target: 'node4',
      zIndex: 1,
      vertices: [{ x: 260, y: 380 }],
      router: 'orth',
    });
    (graph as Graph).addNode(rect1);
    (graph as Graph).addNode(rect2);
    (graph as Graph).addEdge(edge1);

    (graph as Graph).addNode(rect3);
    (graph as Graph).addEdge(edge2);
    (graph as Graph).addNode(rect4);
    (graph as Graph).addEdge(edge3);
  };
  const addLabel = () => {
    const edge10 = new Shape.Edge({
      id: 'edge10',
      source: { x: 500, y: 100 },
      target: { x: 500, y: 400 },
      labels: [
        {
          attrs: {
            label: { text: '标签1' },
          },
          position: {
            distance: 0,
          },
        },
        {
          attrs: {
            label: { text: '标签2' },
          },
          position: {
            distance: 0.5,
          },
        },
      ],
    });
    (graph as Graph).addEdge(edge10);
  };
  const addLine = () => {
    const edge11 = new Shape.Edge({
      id: 'edge11',
      source: { x: 600, y: 100 },
      target: { x: 600, y: 400 },
      attrs: {
        line: {
          stroke: '#7c68fc',
          sourceMarker: 'block',
          targetMarker: {
            name: 'ellipse',
            rx: 10,
            ry: 6,
          },
        },
      },
      labels: [
        {
          attrs: {
            label: { text: '标签1' },
          },
          position: {
            distance: 0,
          },
        },
        {
          attrs: {
            label: { text: '标签2' },
          },
          position: {
            distance: 0.5,
          },
        },
      ],
    });
    (graph as Graph).addEdge(edge11);
  };
  const busRoute = () => {
    const edge12 = new Shape.Edge({
      id: 'edge12',
      source: { x: 100, y: 50 },
      target: { x: 1400, y: 50 },
      labels: [
        {
          markup: [
            {
              tagName: 'circle',
              selector: 'dot',
            },
            {
              tagName: 'text',
              selector: 'txt',
            },
          ],
          attrs: {
            txt: {
              fill: '#7468fc',
              textAnchor: 'middle',
              textVerticalAnchor: 'middle',
              refX: 0,
              refY: 20,
              text: '始发站',
            },
            dot: {
              fill: '#ffffff',
              stroke: 'red',
              storkeWidth: 1,
              r: 5,
              cx: 0,
              cy: 0,
            },
          },
          position: {
            distance: 0,
          },
        },
        {
          markup: [
            {
              tagName: 'circle',
              selector: 'dot',
            },
            {
              tagName: 'text',
              selector: 'txt',
            },
          ],
          attrs: {
            txt: {
              fill: '#7468fc',
              textAnchor: 'middle',
              textVerticalAnchor: 'middle',
              refX: 0,
              refY: 20,
              text: '站点A',
            },
            dot: {
              fill: '#ffffff',
              stroke: '#000000',
              storkeWidth: 1,
              r: 5,
              cx: 0,
              cy: 0,
            },
          },
          position: {
            distance: 0.2,
          },
        },
        {
          markup: [
            {
              tagName: 'circle',
              selector: 'dot',
            },
            {
              tagName: 'text',
              selector: 'txt',
            },
          ],
          attrs: {
            txt: {
              fill: '#7468fc',
              textAnchor: 'middle',
              textVerticalAnchor: 'middle',
              refX: 0,
              refY: 20,
              text: '站点B（当前位置）',
            },
            dot: {
              fill: 'green',
              stroke: '#000',
              storkeWidth: 1,
              r: 5,
              cx: 0,
              cy: 0,
            },
          },
          position: {
            distance: 0.5,
          },
        },
        {
          markup: [
            {
              tagName: 'circle',
              selector: 'dot',
            },
            {
              tagName: 'text',
              selector: 'txt',
            },
          ],
          attrs: {
            txt: {
              fill: '#7468fc',
              textAnchor: 'middle',
              textVerticalAnchor: 'middle',
              refX: 0,
              refY: 20,
              text: '终点站',
            },
            dot: {
              fill: '#ffffff',
              stroke: 'red',
              storkeWidth: 1,
              r: 5,
              cx: 0,
              cy: 0,
            },
          },
          position: {
            distance: 1,
          },
        },
      ],
      attrs: {
        line: {
          stroke: '#7c68fc',
          targetMarker: {
            name: 'circle',
            r: 0.1,
          },
        },
      },
    });
    (graph as Graph).addEdge(edge12);
  };
  return (
    <div>
      <div>
        <Button onClick={addGraph}>添加图像</Button>
        <Button onClick={addLabel}>添加线和标签</Button>
        <Button onClick={addLine}>添加线和样式</Button>
        <Button onClick={busRoute}>实例：公交路线</Button>
        <Button onClick={test08}>toJSON</Button>
      </div>
      <div id="container"></div>
    </div>
  );
}
